<!-- 
  人员管理
 -->

<div class="member">
  <div class="member-head">
    <span>
      <!-- <nz-breadcrumb nzSeparator=">">
        <nz-breadcrumb-item>
          组织结构
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          人员管理
        </nz-breadcrumb-item>

      </nz-breadcrumb> -->
      <a [routerLink]="['/outer/dashboard']" class="breadcrumb">
        工作台
      </a>
      <span style="color: #acacac">
        <i nz-icon type="right" theme="outline"></i>
        组织结构
      </span>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        人员管理
      </b>
    </span>


    <div style="float: right;">
      <nz-input-group nzSearch [nzSuffix]="suffixButton" style="width: 260px;">
        <input type="text" maxlength="30" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)"
          [(ngModel)]="status.filter" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
      </ng-template>
    </div>
    <div class="common-bread-search">
      <button style="margin-right:20px; float: right" nz-button [nzType]="'primary'" (click)="addRole()">
        添加人员
      </button>
      <button style="margin-right:20px; float: right" nz-button [disabled]="status.delBtnStatus" [nzType]="'primary'"
        (click)="delmembers()">
        批量删除
      </button>
    </div>


    <!-- <span class="common-pager-helper">
          
        </span> -->

  </div>
  <div class="member-body">
    <!-- <nz-spin [nzTip]="" [nzSpinning]=""> -->
    <!-- <div class="common-table-wrap auto"> -->
    <div class="body">
      <nz-table #basicTable [nzData]="" [nzShowPagination]="false" [nzScroll]="{ y: '560px' }">
        <thead style="background-color:rgba(0, 0, 0, 0.651); overflow-y:hidden;">
          <tr>
            <th nzWidth="2%" nzShowCheckbox [(nzChecked)]="status.allChecked" [nzIndeterminate]="status.indeterminate"
              (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="10%">序号</th>
            <th nzWidth="12%">姓名</th>
            <th nzWidth="14%">账号</th>
            <th nzWidth="12%">手机</th>
            <th nzWidth="13%">部门</th>
            <th nzWidth="13%">角色</th>
            <th nzWidth="10%">状态</th>
            <th nzWidth="10%">操作</th>
          </tr>
        </thead>
        <tbody class="zzj-scrollbar">
          <tr *ngFor="let data of status.dataList;let idx = index">
            <td nzShowCheckbox [nzDisabled]="data.userName =='admin' && data.userName == status.user"
              [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckboxStatus()">
            </td>
            <td>{{idx+1}}</td>
            <td>{{data.name || '-'}}</td>
            <td>{{data.userName || '-'}}</td>
            <td>{{data.phoneNumber || '-'}}</td>
            <td>{{data.organizationUnitName || '-'}}</td>
            <ng-container *ngIf="data.roles.length !== 0">
              <td  class="hidden-row" style="width: 20px"   >
                <span *ngFor="let item of data.roles ;let idx1 = index " [title]="item.displayName" >{{item.displayName || '-'}} <span *ngIf="data.roles.length !== 1 && idx1 == 0">,</span> </span>
              </td>
            </ng-container>
            <ng-container *ngIf="data.roles.length == 0">
              <td>
                -
              </td>
            </ng-container>
            <td>
              <!-- 当前用户不能自己禁用，admin无法禁用 -->
              <nz-switch (click)="clickSwitch(data)" [nzControl]="false"
                *ngIf="data.userName !='admin' && data.userName != status.user" [ngModel]="data.isActive"
                [nzLoading]="status.isLoding" [nzDisabled]='status.statusDisabled' nzCheckedChildren="启用"
                nzUnCheckedChildren="禁用"></nz-switch>
            </td>
            <td>
              <a href="javascript:;" (click)="resetPassword(data)" title="重置密码">
                <i nz-icon class="icon" type="retweet" theme="outline"></i>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
              <a href="javascript:;" (click)="editRole(data)" title="编辑">
                <i nz-icon class="icon" type="form"></i>
              </a>
              <nz-divider nzType="vertical" *ngIf="data.userName !='admin' && data.userName != status.user">
              </nz-divider>
              <a href="javascript:;" (click)="delRole(data)"
                *ngIf="data.userName !='admin' && data.userName != status.user" title="删除">
                <i nz-icon class="icon" type="delete"></i>
              </a>

            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="pager">
      <nz-pagination [(nzPageIndex)]="status.pager.pageIndex" [nzTotal]="status.pager.totalPages"
        [nzShowTotal]="rangeTemplate" nzShowQuickJumper [nzPageSize]="status.pager.pageSize"
        (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)">
      </nz-pagination>
      <!-- <ng-template #renderItemTemplate let-type let-page="page">
          <a *ngIf="type === 'pre'">上页</a>
          <a *ngIf="type === 'next'">下页</a>
          <a *ngIf="type === 'page'">{{ page }}</a>
        </ng-template> -->
      <ng-template #rangeTemplate let-total>
        共 {{total}} 条
      </ng-template>
    </div>
    <!-- </div> -->
  </div>
  <!-- </nz-spin> -->








  <!-- 编辑新建模态框 -->
  <nz-modal [(nzVisible)]="status.isadd || status.isedit" (nzOnCancel)="cancelAddOredit()" [nzFooter]="modalFooter"
    [nzMaskClosable]='false' [nzTitle]="status.isadd?'添加人员':'修改人员'" [nzStyle]="{ top: '200px' }">
    <div nz-row>
      <label nz-col nzSpan="4" style="line-height: 32px">账号</label>
      <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.member.userName"
        style="width: 70%; margin-right:8px;" placeholder="请输入账号名称"> <span style=" color:red"> *</span>
    </div>

    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">姓名</label>
      <input maxlength="10" nz-col nzSpan="20" nz-input [(ngModel)]="status.member.name"
        style="width: 70%; margin-right:8px;" placeholder="请输入姓名"> <span style=" color:red"> *</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">手机</label>
      <input maxlength="11" nzRequired nz-col nzSpan="20" nz-input [(ngModel)]="status.member.phoneNumber"
        style="width: 70%; margin-right:8px;" placeholder="请输入11位长度手机号"> <span style=" color:red"> *</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">邮箱</label>
      <input maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.member.emailAddress"
        style="width: 70%; margin-right:8px;" placeholder="请输入邮箱"> <span style=" color:red"> *</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">组织</label>

      <nz-select style="width:70%;margin-right: 8px;" [(ngModel)]="status.orgValue" nzPlaceHolder="请选择组织"
        (ngModelChange)="selChange($event)" [compareWith]="compareFn">
        <nz-option *ngFor="let option of status.orgOptions" [nzLabel]="option.label" [nzValue]="option"></nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">角色</label>

      <nz-select style="width:70%;margin-right: 8px;" (ngModelChange)="selChange($event)" [(ngModel)]="status.roleValue"
        [compareWith]="compareFn" nzPlaceHolder="请选择角色">
        <nz-option *ngFor="let option of status.roleOptions" [nzLabel]="option.label" [nzValue]="option">
        </nz-option>
      </nz-select> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">密码</label>
      <input maxlength="50" autocomplete="new-password" type="password" nz-col nzSpan="20" nz-input
        [(ngModel)]="status.member.pwd" style="width: 70%; margin-right:8px;" placeholder="默认密码与账号一致">
    </div>

    <ng-template #modalFooter>
      <span></span>
      <!-- <button nz-button nzType="default"
        (click)="(status.isadd=false) || (status.isedit=false && status.title=null && status.description=null)">取消</button> -->
      <button nz-button nzType="primary" (click)="status.isadd?addSave():editSave()"
        [nzLoading]="isOkLoading">保存</button>
    </ng-template>
  </nz-modal>

  <!-- 弹出框（删除） -->
  <nz-modal [(nzVisible)]="status.isDelete" nzTitle="删除组织" nzOkText="确定" nzCancelText="取消" (nzOnOk)="delNode()"
    (nzOnCancel)="Canceldel()" [nzStyle]="{ top: '300px' }">
    <p>确定删除 {{status.member.name}} 吗？</p>
    <p style="color:red">删除后不能恢复，请谨慎操作。</p>
  </nz-modal>
  <!-- 弹出框重置默认密码 -->
  <nz-modal [(nzVisible)]="status.isReset" nzTitle="重置密码" nzOkText="确定" nzCancelText="取消" (nzOnCancel)="Canceldel()">
    <p>确定重置{{status.member.name}}密码吗？</p>
    <p style="color:rgb(165, 110, 110)">重置后密码为当前账号</p>
  </nz-modal>
</div>